<template>
	<view>
		<view class="page_bg"></view>

		<view class="content">
			<image :src="top_bg" style="height: 155upx;width: 100%;" mode="scaleToFill"></image>

			<view class="coupon_hori">
				<u-scroll-list :indicator="false">

					<view v-for="(item, index) in couponList" :key="index">
						<view class="coupon-item" :style="{'background-image':'url('+coupon_item_bg+')'}"
							@click="goCouponDetail(item)">
							<text style="font-size: 20upx;color: #333;align-self: flex-start;margin: 10upx 0 0 24upx;font-weight: bold;white-space: nowrap;
								max-width: 100rpx;
								overflow: hidden;
								text-overflow: ellipsis;">
								{{item.couponName}}
							</text>

							<view style="display: flex;flex-direction: column;align-items: center;margin-top: -20upx;">
								<text style="font-size: 50upx;color: #fff;font-weight: bold;">{{item.money}}</text>
								<text style="font-size: 18upx;color: #fff;margin-top: -6upx;max-width: 130rpx;
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;">{{getSlice(item.preferentialInfo)}}</text>
							</view>


							<text style="font-size: 22upx;color: #fff;font-weight: bold;margin-bottom: 45upx;"
								@click.stop="getFreeCoupon(item)">{{item.tag}}</text>
						</view>

					</view>
				</u-scroll-list>

				<view class="right-bar"></view>
			</view>


			<view v-for="(sitem, sindex) in couponBuyList" :key="sindex">

				<view class="coupon_buy_item" :style="{'background-image':'url('+coupon_buy_bg+')'}">

					<view style="margin-left: 50upx;display: flex;flex-direction: column;">
						<view style="display: flex;align-items: flex-end;">
							<text style="font-weight: bold;font-size: 28upx;color: #009B01;">￥</text>
							<text
								style="font-weight: bold;font-size: 50upx;color: #009B01;line-height: 1;">{{sitem.couponTotalMoney}}</text>
							<text style="font-weight: bold;font-size: 36upx;color: #333333;margin-left: 10upx;
								max-width: 260rpx;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;">
								{{sitem.secKillName}}
							</text>
						</view>

						<text style="color: #A26C4B;font-size: 30upx;margin-top: 10upx;max-width: 430upx;">
							{{sitem.conditionInfo}}
						</text>
					</view>

					<text style="width: 192upx;
						 height: 66upx;margin-right: 20upx;text-align: center;line-height: 66upx;
						 color: #FFF9F5;font-size: 28upx;font-weight: bold;border-radius: 90upx;
						 background: linear-gradient(to right, #FB855B, #FA6159, #F83D57);" @click="goBuyCoupon(sitem)">
						新人价{{sitem.nowPrice}}元
					</text>
				</view>

			</view>

		</view>

		<view class="coupon_use" @click="goUseCoupon">
			<text
				style="font-size: 22upx;color: #009B01;border-radius: 90upx;border: #009B01 1upx solid;width: 29upx;height: 29upx;text-align: center;line-height: 29upx;font-weight: bold;">{{hasCount}}</text>
			<text style="font-size: 26upx;color: #333;margin:0 9upx;font-weight: bold;">去使用优惠券</text>
			<u-icon name="arrow-right" color="#333" size="12"></u-icon>
		</view>



		<u-popup :show="showPop" mode="center" :customStyle="{'background-color':'transparent'}">
			<view class="coupon_content">

				<image class="coupon_dialog_top" :src="coupon_dialog_bg" mode="scaleToFill"></image>
				<view class="top" :style="{'height':dialog_content_height}">


					<scroll-view scroll-y="true" class="scrollview" :style="{'height':scroll_height}">
						<view class="top-coupon-item">

							<view v-for="(ditem,dindex) in dialogCouponList" :key="dindex">
								<view class="coupon-item-dialog"
									:style="{'background-image':'url('+coupon_dialog_item_bg+')'}">

									<view style="display: flex;align-items: flex-end;margin-top: 25upx;">
										<text class="money">￥</text>
										<text class="money-amount">{{ditem.money}}</text>

									</view>

									<text class="d-coupon-name">{{ditem.couponName}}</text>

								</view>
							</view>
						</view>

					</scroll-view>
					<text class="btn" @click="getDialogCoupon">一键领取</text>
				</view>

				<image :src="closeImg" class="close-img" mode="scaleToFill" @click="showPop=false"></image>

			</view>

		</u-popup>


	</view>
</template>

<script>
	import {
		getCouponDialog,
		receiveCoupons,
		getCenterCoupon
	} from '@/common/apis/home-api.js';

	export default {
		data() {
			return {
				top_bg: this.baseImageUrl + 'uni_rental/-e-title@2x.png',
				coupon_item_bg: this.baseImageUrl + 'uni_rental/copon_item_bg.png',
				couponList: [],
				couponBuyList: [],
				coupon_buy_bg: this.baseImageUrl + 'uni_rental/优惠券背景@2x.png',

				coupon_dialog_bg: this.baseImageUrl + 'uni_rental/抬头@2x.png',
				closeImg: this.baseImageUrl + 'uni_rental/关闭@2x.png',
				coupon_dialog_item_bg: this.baseImageUrl + 'uni_rental/优惠券弹窗条目背景@2x.png',
				showPop: false,
				dialogCouponList: [],
				hasCount: 0,
			}
		},
		computed: {
			tenantId() {
				return this.$store.state.user.tenantId;
			},
			deptId() {
				return this.$store.state.user.deptId;
			},
			dialog_content_height() {

				if (this.dialogCouponList.length > 3) {
					return '634rpx';
				} else {
					return '430rpx';
				}
			},
			scroll_height() {

				if (this.dialogCouponList.length > 3) {
					return '443rpx';
				} else {
					return '239rpx';
				}
			},
			isNotLogin() {
				return uni.$u.test.isEmpty(this.$store.state.user.userInfo);
			}
		},
		onLoad() {
			// this.getCouponDialogData();
			// this.getData();

			uni.$on('login', res => {
				this.getCouponDialogData();
				this.getData();
			})

			uni.$on('getCoupon', res => {
				this.getCouponDialogData();
				this.getData();
			})
		},
		onShow() {
			this.getCouponDialogData();
			this.getData();
		},
		methods: {
			//获取弹窗数据
			getCouponDialogData() {
				getCouponDialog({
					tenantId: this.tenantId,
					applicableUnitNo: this.deptId,
				}).then(res => {
					this.showPop = 0 == res.ifWindow;
					this.dialogCouponList = res.couponInfoVoList;

				})
			},

			getData() {
				getCenterCoupon({
					tenantId: this.tenantId,
					applicableUnitNo: this.deptId,
				}).then(res => {
					
					this.couponList = res.freeCoupons;

					this.couponBuyList = res.seckillCoupons;

					this.hasCount = res.couponNum;
				})
			},

			//跳转免费优惠券详情
			goCouponDetail(item) {
				if (this.isNotLogin) {
					this.$store.dispatch('user/MmvLogin'); // 获取openid
					return
				}

				uni.navigateTo({
					url: './coupon-detail'+uni.$u.queryParams(item)
				})
			},

			//获取免费优惠券
			getFreeCoupon(item) {
				
				if(item.tag == '立即领取'){
					this.getCoupon([item.couponId]);
				}
			},

			//去买券
			goBuyCoupon(item) {
				if (this.isNotLogin) {
					this.$store.dispatch('user/MmvLogin'); // 获取openid
					return
				}

				uni.navigateTo({
					url: '/pages/activity/activityDetail-secondKill?bizNo='+item.id
				})
			},

			//领取弹窗优惠券
			getDialogCoupon() {
				this.showPop = false;

				let list = this.dialogCouponList.map(item =>
					item.couponId
				);

				this.getCoupon(list);
			},

			goUseCoupon() {
				if (this.isNotLogin) {
					this.$store.dispatch('user/MmvLogin'); // 获取openid
					return
				}

				if (this.hasCount <= 0) {
					uni.showToast({
						title: '暂无可用优惠券',
						icon:'error'
					})
					return
				}
				
				uni.navigateTo({
					url:'/pages/coupon/mine-couponList'
				})
			},


			//一键领取优惠券
			getCoupon(list) {
				if (this.isNotLogin) {
					this.$store.dispatch('user/MmvLogin'); // 获取openid
					return
				}

				receiveCoupons({
					couponIds: list
				}).then(res => {

					uni.showToast({
						title: '恭喜您，领取成功',
						icon: 'none'
					})

					this.getData();

				})
			},
			
			//截取字符串
			getSlice(s) {
				let str = s+'';
				
				if(uni.$u.test.isEmpty(str)){
					return str;
				}
				if(str.indexOf('减')<0){
					return str;
				}
				
				let i = str.indexOf('减');
				return str.slice(0, i+1);
			}

		}
	}
</script>

<style lang="scss" scoped>
	.page_bg {
		position: fixed;
		z-index: -1;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: $redf8;
	}

	.content {
		margin: 50upx 20upx 100upx;
		@include flex(column);

	}

	.coupon_hori {
		height: 255upx;
		border-radius: 14upx;
		background-color: #FFEADF;
		padding: 0 40upx 0 20upx;
		position: relative;
		margin-bottom: 10upx;
	}

	.coupon-item {
		@include flex(column);
		align-items: center;
		width: 190upx;
		height: 239upx;
		margin-top: 18upx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: 0 0;
		justify-content: space-between;
	}

	.right-bar {
		width: 47upx;
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: #FFCCB0;
		border-radius: 0 14upx 14upx 0;
		box-shadow: -10upx 0 20upx #FCA2A7, 0 0 20upx 10upx #FFEADF inset;
	}

	.coupon_buy_item {
		height: 200upx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: 0 0;
		margin-top: 20upx;
		@include flex;
		justify-content: space-between;
		align-items: center;
	}

	.coupon_use {
		position: fixed;
		width: 270upx;
		height: 80upx;
		right: 0;
		bottom: 0;
		margin: 0 20upx 155upx 0;
		background-color: #fff;
		border-radius: 90upx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 3upx 5upx 10upx #FCA2A7;
	}


	.coupon_content {
		@include flex(column);
		align-items: center;

	}

	.coupon_dialog_top {
		width: 600upx;
		height: 280upx;
	}

	.top {
		position: relative;
		width: 618upx;
		// height: 634upx;
		top: -40upx;
		@include flex(column);
		align-items: center;
		border-radius: 24upx;
		border: 4upx solid #E2FFE1;
		background: linear-gradient(to bottom, #FF704E, #FC5C51, #009B01);
	}

	.scrollview {
		width: 100%;
		// height: 443upx;
		flex-grow: 1;
		padding: 30upx 30upx 0;
		box-sizing: border-box;
	}

	.top-coupon-item {
		width: 100%;
		// height: 443upx;
		// margin: 30upx 30upx 0;
		display: inline-flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.coupon-item-dialog {
		margin: 10upx 6upx;
		width: 172upx;
		height: 204upx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.money {
		color: #009B01;
		font-size: 30upx;
		font-weight: bold;
	}

	.money-amount {
		color: #009B01;
		font-size: 60upx;
		line-height: 60upx;
		font-weight: bold;
		font-family: PingFang SC, PingFang SC-Bold;
	}

	.d-coupon-name {
		color: #333333;
		font-size: 28upx;
		font-weight: bold;
		margin-bottom: 26upx;
		max-width: 170upx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.btn {
		width: 360upx;
		height: 100upx;
		line-height: 100upx;
		text-align: center;
		font-size: 32upx;
		color: #A31E23;
		background: linear-gradient(to bottom, #FFEEA1, #FFD86C, #FFCA3C);
		border-radius: 50upx;
		margin-bottom: 30upx;
		font-weight: bold;
	}

	.close-img {
		width: 60upx;
		height: 60upx;
	}
</style>
